<template>
	<view class="box">
		<view class="header-bg">
			<view class="">
				<image :src="$BASE_URL +'/uploads/20221220/7024f2d02c280b71d9ab654a0da6ca47.png'" mode="aspectFill">
				</image>
			</view>
			<view class="">
				<view class="" style="font-size: 44rpx;font-weight: 700;color: #fff;margin-bottom: 20rpx;">
					实名认证安全保障
				</view>
				<view class="" style="font-size: 24rpx;color: #fff;">
					为保障您的资金安全，请填写与您身份一致
					的信息，否则不会通过认证。
				</view>
			</view>
		</view>

		<view class="card">
			<view class=""
				style="font-size: 32rpx;color: #3D3D3D;font-weight: 700;margin-bottom: 20rpx;margin-top: 20rpx;">
				填写个人信息
			</view>
			<view class="item">
				<view class="label">
					姓名
				</view>
				<u-input v-model="name" :type="type" placeholder='请输入姓名' />
			</view>
			<view class="item">
				<view class="label">
					身份证号
				</view>
				<u-input v-model="cid" :type="type" placeholder='请输入身份证号' />
			</view>

			<view class="cidbox">
				<view class="cidbox-item">
					<image :src="$BASE_URL + picList[3]" mode="aspectFill"
						style="width: 48rpx;height: 48rpx;position: absolute;right: 20rpx;top: 20rpx;z-index: 99;"
						v-if="cardcid" @click="clearPic(1)"></image>
					<image :src="$BASE_URL + picList[1]" mode="aspectFill" @click="sun()" v-if="!cardcid"></image>
					<image :src="cardcid" mode="aspectFill" v-else></image>

				</view>
				<view class="cidbox-item">
					<image :src="$BASE_URL + picList[3]" mode="aspectFill"
						style="width: 48rpx;height: 48rpx;position: absolute;right: 20rpx;top: 20rpx;z-index: 99;"
						v-if="backid" @click="clearPic(2)"></image>
					<image :src="$BASE_URL + picList[2]" mode="aspectFill" @click="sun2()" v-if="!backid"></image>
					<image :src="backid" mode="aspectFill" v-else></image>

				</view>
			</view>
			<view class="">
				<text style="color: #f46654;font-size: 20rpx;">*</text>
				<text style="color: #999;font-size: 20rpx;">证件文字需清晰辨认，无遮挡或模糊。</text>
			</view>
		</view>

		<view class="btn" @click="submit()" v-if="flag">
			提交认证
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: true,
				name: '',
				cid: '',
				picList: [],
				action: 'https://zuji.jiusuding.cn/.cn//api/common/upload',
				fileList: [],
				cardcid: '', //身份证正面
				backid: "", // 身份证背面
				id: {
					identity_just_image: '',
					identity_back_image: ''
				},
				timer: null,
				type: ''
			}
		},
		mounted() {
			this.getpic()
			this.getdefault()
		},
		methods: {
			getdefault() {
				this.$http('user.getIdentity').then(res => {

					if (res.code == 1) {
						if (res.data.item != null) {
							this.cardcid = this.$BASE_URL + res.data.item.identity_just_image
							this.backid = this.$BASE_URL + res.data.item.identity_back_image
							this.name = res.data.item.identity_name
							this.cid = res.data.item.identity_number
							this.flag = false
						}

					}
				})


			},
			submit() {


				if (this.cardcid == '' || this.backid == '') {
					uni.showToast({
						title: '请上传身份证图片',
						icon: 'none'
					})
					return false
				}
				uni.showLoading({
					title: '加载中'
				})

				this.$http('user.autonym', this.id).then(res => {
					console.log(res);
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 1) {
						setTimeout(() => {

							uni.$emit('updateData', 1)


							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					}
				})

			},
			sun() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log(res);

						uni.uploadFile({

							url: 'https://zuji.jiusuding.cn/api/common/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							// #ifdef H5
							
							header: {
						
								"token": uni.getStorageSync('token') || ''
							},
							files: [{
								name: 'file',
								file: res.tempFiles[0],
								uri: res.tempFilePaths[0],
							}],

							// #endif
							
							// #ifdef MP-ALIPAY
							
							
							header: {
								"Content-Type": "multipart/form-data",
								"token": uni.getStorageSync('token') || ''
							},
							fileType: 'image',
							name: 'file',
							// #endif



							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data));

								let url = JSON.parse(uploadFileRes.data).data.url

								//获取最后一个.的位置
								var index = url.lastIndexOf(".");
								//获取后缀
								var ext = url.substr(index + 1);
								//输出结果
								console.log(ext);
								if (ext != 'jpg' && ext != 'jpeg') {
									uni.showToast({
										icon: 'none',
										title: '图片格式不正确,请使用jpg格式'
									});
									return false
								}
								this.cardcid = JSON.parse(uploadFileRes.data).data.fullurl
								console.log(	this.cardcid );
								this.id.identity_just_image = JSON.parse(uploadFileRes.data).data
									.url
								this.$http('user.identityVerify', {
									type: 1,
									image: this.id.identity_just_image
								}).then(res => {
									// console.log(res);
									if (res.code == 1) {
										this.cid = res.data.result.result.idcardno
										this.name = res.data.result.result.name
									}
								})

							}
						});

					}
				});

			},

			sun2() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res.tempFiles);
						uni.uploadFile({
							url: 'https://zuji.jiusuding.cn/api/common/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
						// #ifdef H5
						
						header: {
												
							"token": uni.getStorageSync('token') || ''
						},
						files: [{
							name: 'file',
							file: res.tempFiles[0],
							uri: res.tempFilePaths[0],
						}],
						
						// #endif
						
						// #ifdef MP-ALIPAY
						
						
						header: {
							"Content-Type": "multipart/form-data",
							"token": uni.getStorageSync('token') || ''
						},
						fileType: 'image',
						name: 'file',
						// #endif
							success: (uploadFileRes) => {
								let url = JSON.parse(uploadFileRes.data).data.url
								//获取最后一个.的位置
								var index = url.lastIndexOf(".");
								//获取后缀
								var ext = url.substr(index + 1);
								//输出结果
								// console.log(ext);
								if (ext != 'jpg' && ext != 'jpeg') {
									uni.showToast({
										icon: 'none',
										title: '图片格式不正确,请使用jpg格式'
									});
									return false
								}
								this.backid = JSON.parse(uploadFileRes.data).data.fullurl

								this.id.identity_back_image = JSON.parse(uploadFileRes.data).data
									.url




							}
						});

					}
				});

			},
			clearPic(num) {
				if (num == 1) {
					this.cardcid = ''
				} else {
					this.backid = ''
				}
			},
			getpic() {
				this.$http('common.getPic', {}).then(res => {
					if (res.code === 1) {
						this.picList = res.data.result.realname

					}
				});
			},
		}

	}
</script>

<style scoped lang="scss">
	.box {
		min-height: 100vh;

		.header-bg {
			display: flex;
			padding: 36rpx 25rpx 0 25rpx;
			// align-items: center;
			box-sizing: border-box;

			image {
				width: 120rpx;
				height: 120rpx;
			}

			height: 366rpx;
			background: linear-gradient(105deg, #FC6256 1%, #F7182B 100%);
		}

		.card {
			width: 700rpx;
			padding: 29rpx 21rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			border-radius: 20rpx;
			margin: 0 auto;
			margin-top: -110rpx;

			.item {
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid gainsboro;
				margin-bottom: 25rpx;

				.label {
					width: 130rpx;
				}
			}

			.cidbox {
				display: flex;
				justify-content: space-between;
				margin: 35rpx 0;

				.cidbox-item {
					position: relative;
					width: 312rpx;
					height: 200rpx;
					// background-color: #FC6256;
					border-radius: 15rpx;
					overflow: hidden;

					image {
						width: 312rpx;
						height: 200rpx;
					}
				}
			}
		}

		.btn {
			width: 680rpx;
			height: 88rpx;
			background-color: #FF4747;
			line-height: 88rpx;
			text-align: center;
			color: #F4F6F4;
			font-size: 32rpx;
			position: fixed;
			bottom: 100rpx;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 44rpx;
		}

		.btn :active {
			background-color: #eb4141;
		}
	}
</style>
